import React from 'react';
import {Linking, StyleSheet, View} from 'react-native';
import Toast from 'react-native-easy-toast';

import api from '../../../common/api';

import Images from './images';
import Top from './top';
import Bottom from './bottom';
import TextContent from './textContent';
import Loading from '../../../components/loading';

export default class extends React.Component {
    state = {
        id: 0,
        itemInfo: {},
        currentPage: 0,
        isFetching: true
    };

    //获取数据
    getData() {
        const {id} = this.state;
        api({url: 'api/article/getArticleDetail', data: {id}, notNeedLogin: true})
            .then(data => {
                this.setState({
                    itemInfo: data
                });
            })
            .catch(e => {
                this.showToast(e.msg);
            })
            .finally(() => {
                this.setState({
                    isFetching: false
                });
            });
    }

    //获取优惠券/淘口令
    getCouponUrl = itemId => {
        const {isFetchingCouponUrl} = this.state;
        if (isFetchingCouponUrl) {
            return;
        }
        this.setState({
            isFetchingCouponUrl: true
        });
        api({url: 'api/ali/getCouponUrl', data: {itemid: itemId}})
            .then(data => {
                const {couponShortLinkUrl} = data;
                Linking.canOpenURL(couponShortLinkUrl)
                    .then(supported => {
                        if (!supported) {
                            this.showToast('不能打开淘宝链接，请检查');
                        } else {
                            return Linking.openURL(couponShortLinkUrl);
                        }
                    })
                    .catch(err => {
                        this.showToast('不能打开淘宝链接，请检查');
                        console.error('An error occurred', err);
                    });
            })
            .catch(e => {
                this.showToast(e.msg);
            })
            .finally(() => {
                this.setState({
                    isFetchingCouponUrl: false
                });
            });
    };

    showToast = text => {
        this.refs.toast.show(text);
    };

    componentDidMount() {
        const {params = {}} = this.props.navigation.state;
        const id = params.id;
        this.setState({
            id
        }, () => {
            this.getData();
        });
    }

    goBack = () => {
        this.props.navigation.goBack();
    };

    setCurrent = (index) => {
        this.setState({
            currentPage: index
        });
    };

    render() {
        const {currentPage, itemInfo, itemInfo: {item_list = []}, isFetching} = this.state;
        const {navigation} = this.props;
        let currentItem = item_list[currentPage] || {},
            total = item_list.length;
        return (
            <View style={styles.container}>
                {
                    !isFetching ?
                        itemInfo.type === 1 ?
                            <View style={{flex: 1}}>
                                <Top goBack={this.goBack} itemInfo={itemInfo}/>
                                <Images itemList={item_list} setCurrent={this.setCurrent}/>
                                <Bottom
                                    navigation={navigation}
                                    currentPage={currentPage}
                                    currentItem={currentItem}
                                    total={total}
                                    getCouponUrl={this.getCouponUrl}/>
                            </View>
                            :
                            <View style={{flex: 1}}>
                                <TextContent getCouponUrl={this.getCouponUrl} itemInfo={itemInfo}/>
                            </View>
                        : <Loading isLoading={true}/>
                }
                <Toast ref="toast" position="center"/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
        flex: 1
    }
});
